<template>
	<div>
		<mainTop></mainTop>
		<div class="hyjbMiddleBox">
			<div class="tqhyPageHead">
				<ul @mouseleave="tqhyHeadHoverIndex = selectedTqhyHeadHover">
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==0||selectedTqhyHeadHover==0}" 
							@click="changeWeb(0)"
							@mouseover="tqhyHeadHoverIndex = 0">会议首页</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==1||selectedTqhyHeadHover==1}" 
							@click="changeWeb(1)"
							@mouseover="tqhyHeadHoverIndex = 1">同期会议</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==2||selectedTqhyHeadHover==2}" 
							@click="changeWeb(2)"
							@mouseover="tqhyHeadHoverIndex = 2">会议嘉宾</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==3||selectedTqhyHeadHover==3}" 
							@click="changeWeb(3)"
							@mouseover="tqhyHeadHoverIndex = 3">视频回放</li>
				</ul>
			</div>
			<div class="hyjbPageContent" >
				<div class="jbModule" 
					v-for="(item,index) in guest.rows"
					:key="index"
					>
					<div style="width: 243px;height: 243px;">
						<img :src="'https://zha.heavenk.com/prod-api'+item.photo" alt="" style="width: 100%;height: 100%;">
					</div>
					<div style="color: #150e52;font-size: 19px;text-align: center;line-height: 62px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
						{{ item.name }}<span style="font-size: 15px;">（{{item.unit}}）</span>
					</div>
				</div>
				
				
			</div>
			<div style="width: 1140px;min-width: 1140px;margin: auto;height: 40px;" v-if="total">
			<div style="height: 40px;float: right;margin-top: 0px;">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page.sync="currentPage"
				      :page-size="12"
				      layout="prev, pager, next"
				      :total="this.total">
				    </el-pagination>
					<div class="el-pagination__jump">
						共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
							<input type="text" class="inputNum" v-model="pageInputNum"
							oninput="value=value.replace(/[^\d]/g,'');
							if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
							value= value.substr(1,1)}" >
					</div>
					页
					</div>
					
				<button class="button1" style=""  @click="changePage">确定</button>
			</div>
			</div>
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
			   tqhyHeadHoverIndex:2,
			   selectedTqhyHeadHover:2,
			   pageSize: 16,
			   totalCount: 1,
			   totalPageSize:1,
			   pageInputNum:'',
			   currentPage: 1,
			   guest:'',
			   total:0,

			   };
			},
		created(){
			this.getGuest(1);
		},
		methods:{
			getGuest(pnum){
				axios.get('https://zha.heavenk.com/prod-api/web/guest/list',{
					params:{
						pageSize:12,
						pageNum:pnum,
					}
				}).then((res)=>{
                    this.guest=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/12)
					// console.log(this.guest);
					
                })
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange() {
			//    this.contentPerPage.pn=this.currentPage;
			//    contentList(this.contentPerPage).then(response => {
			//            this.contentPerPageList = response.data;
			//          });
				this.getGuest(this.currentPage)
			},
			changeFirstPage(){
				this.currentPage=1;
				this.handleCurrentChange();
			},
			changeLastPage(){
				this.currentPage=this.totalPageSize;
				this.handleCurrentChange();
			},
			getTotalPageSize(){
				this.totalPageSize=this.totalCount/this.pageSize
			},
			changePage(){
				this.currentPage=this.pageInputNum;
				this.handleCurrentChange();
			},
			changeWeb(num){
				this.selectedTqhyHeadHover=2
				switch (num) {
					case 0:
						this.$router.push('/hysy')
						break;
					case 1:
						this.$router.push('/tqhy')
						break;
					case 2:
						this.$router.push('/hyjb')
						break;
					case 3:
						this.$router.push('/sphf')
						break;
					default:
						break;
				}

			}
		},
		}
</script>

<style>
	.hyjbMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.tqhyPageHead{
		width: 1140px;
		min-width: 1140px;
		height: 60px;
		margin: auto;
		margin-top: 33px;
	}
	.tqhyPageHead ul{
		list-style: none;
		text-align: center;
		height: 60px;
		width: 1140px;
	}
	.tqhyHeadHover{
		background-color: #150e52 !important;
		color: #fff !important;
	}
	.tqhyPageHead ul li:nth-child(-n+3){
		width: 195px;
		height: 50px;
		margin: auto;
		line-height: 50px;
		float: left;
		margin-right:114px;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		border-radius: 30px;
		border: 2px solid #150e52;
		cursor: pointer;
	} 
	.tqhyPageHead ul li:nth-child(4){
		width: 195px;
		height: 50px;
		line-height: 50px;
		float: left;
		margin: auto;
		border-radius: 30px;
		border: 2px solid #150e52;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
	}
	.hyjbPageContent{
		width: 1140px;
		min-width: 1140px;
		min-height: 500px;
		max-height: 1156px;
		/* background-color: #fff; */
		margin: auto;
		margin-top: 35px;
		overflow: hidden;
		padding-top: 10px;
	}
	.jbModule:nth-child(4n){
		width: 243px;
		height: 315px;
		background-color: #fff;
		display: inline-block;
		margin-right: 0px !important;
		margin-bottom: 56px;
		/* margin-left: 3px; */
	}
	.jbModule{
		width: 243px;
		height: 315px;
		background-color: #fff;
		display: inline-block;
		margin-right: 56px;
		margin-bottom: 56px;
	}
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
</style>